{% load staticfiles %}
<html>
	<head>
		<link rel="stylesheet" href="{% static 'social/css/style.css' %}">
	</head>
    <body >
        <div class="header" {% if error %}style="opacity:0.2"{% endif %}>
    	    <div class="navigation">
        	    <ul>
        	        <li>
        	            <h2><a href="#"><span>Login / Register</span></a></h2>
        	        </li>
                </ul>
        	</div>
            <div class="banner">
                <img src="{% static 'social/images/banner.png' %}">
                <h1>Share your life moments to your real friends ...</h1>
            </div>
        </div>
        <div class="slider" {% if error %}style="opacity:0.2"{% endif %}>
            <img src="{% static 'social/images/social.jpg' %}">
        </div>
        <div class="forms" {% if error %} style="display: block;" {% endif %}>
            <form action="/" method="post" id="register" name="register">
                {% csrf_token %}
                <h1>Register</h1>
                <label for="firstname">firstname</label><input type="text" id="registerFirstName" name="firstname" class="placeholder" placeholder="Example : John">
{#                <img id="firstNameCorrectImage" src="{% static 'social/images/correct.png' %}" style="height: 40px;display: none;">#}
{#                <img id="firstNameIncorrectImage" src="{% static 'social/images/inCorrect.png' %}" style="height:40px;">#}
                <p class="firstNameWarning" id="firstNameWarning"> first name must be containing a-z, A-Z, 0-9 and UnderScore(_)</p>

                <label for="lastname">lastname</label><input type="text" id="registerLastName" name="lastname" class="placeholder" placeholder="Example : Jones">
                <p class="lastNameWarning" id="lastNameWarning"> last name must be containing a-z, A-Z, 0-9 and UnderScore(_)</p>

                <label for="email">email</label><input type="text" id="registerEmail" name="email" class="placeholder" placeholder="Example : John.jones@domain.com">
                <p class="emailWarning" id="emailWarning"> enter a valid address Email </p>

                <label for="password">password</label><input type="password" id="registerPassword" name="password" class="placeholder" placeholder="password">
                <p class="passwordWarning" id="passwordWarning"> password must be at least 6 characters</p>
                <div id="endOfRegister">
                    <input type="submit" value="Register">
                    <div class="bubblingG">
                        <span id="bubblingG_1">
                        </span>
                        <span id="bubblingG_2">
                        </span>
                        <span id="bubblingG_3">
                        </span>
                    </div>
                </div>
            </form>
            <img id="close" src="{% static 'social/images/close.png' %}">
            <form action="/" method="post" id="login">
                {% csrf_token %}
                <h1>Log in</h1>
                <label for="email">email</label><input type="text" name="email" class="placeholder" placeholder="Example : John.jones@domain.com">
                <label for="password">password</label><input type="password" name="password" class="placeholder" placeholder="password">
                <input type="submit" value="Log In">
                {% if error %}
                    <div class="loginAlert">
                        <p>   {{ error }}</p>
                    </div>
                {%  endif %}
            </form>
        </div>


        <script src="{% static 'social/js/jquery-2.0.3.min.js' %}"></script>
        <script src="{% static 'social/js/home.js' %}"></script>
    </body>
</html>
